<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Table</title>
		<link rel="stylesheet" href="__STATIC__/plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="__CSS__/global.css" media="all">
		<link rel="stylesheet" href="__STATIC__/plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="__CSS__/table.css" />
			<style>
	img{vertical-align:middle;}
		.box{
			float:left;width:100px;height:100px;border:1px solid white;background:#EEE;margin:5px;
		}
		
	.boxBor{
		position:absolute;left:0;top:0;display:none;border:1px solid white;z-index:99;background:red;
		background:-moz-linear-gradient(top,rgba(255,255,255,0.25),rgba(255,255,255,0.77));
        background:-webkit-linear-gradient(top,rgba(255,255,255,0.25),rgba(255,255,255,0.77));
        background:-o-linear-gradient(top,rgba(255,255,255,0.25),rgba(255,255,255,0.77));
        background:-ms-linear-gradient(top,rgba(255,255,255,0.25),rgba(255,255,255,0.77));cursor:pointer;

    }
	</style>
	</head>
<body style="width: 600px">
			<div class="layui-tab" lay-filter="demo">
			<ul class="layui-tab-title">
				<li class="">微信</li>
				<li class="layui-this">本地服务器</li>
				<li class="">提取网络图片</li>
				
			</ul>

			<div class="layui-tab-content">
				<div class="layui-tab-item ">内容1</div>
				<div class="layui-tab-item layui-show">
				<div class="layui-upload">
			  	<button type="button" class="layui-btn" id="test1" style="float: right;">上传图片</button>
			  	<div class="layui-upload-list">
			    <img class="layui-upload-img" id="demo1">
			    <p id="demoText"></p>
			  	</div>
			  	<br>
				<div>
				<!-- <div class="boxBor"></div> -->
				<div id="img">	
				</div>
			</div>
		</div>
		<input type="hidden" id="type" value="{$type}">

				<div id="page"></div>
		
			</div>
				<div class="layui-tab-item">内容3</div>
		</div>			 
			
		</div>   
			 

		
	

			<script type="text/javascript" src="__STATIC__/plugins/layui/layui.js"></script>
			<script type="text/javascript" src="__STATIC__/datas/nav.js"></script>	
			<script src="__JS__/index.js"></script>
		    <script src="__JS__/jquery.js"></script>
</body>
</html>

<script>
var index = parent.layer.getFrameIndex(window.name);
layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage
  ,layer = layui.layer;
  $(document).on('click',".box", function(){
  	var type = $("#type").val();

  	var url = $(this).find("img").attr("url");
    var img = '<img src="__STATIC__/'+url+'" url="'+url+'" width="100px" height="100px">';
  	if(type == 'ico'){
    parent.$('#ico').val(url);
    parent.$('#ico_img').html(img);
  	}else{
  	parent.$('#logo').val(url);
    parent.$('#logo_img').html(img);
  	}
    parent.layer.close(index);
});
  //总页数大于页码总数
  laypage.render({
    elem: 'page'
    ,count: {$all} //数据总数
    ,jump: function(obj){
     	$.ajax({
     		type:"post",
     		url:"__ADMIN__/bank/img",
     		data:{page:obj.curr},
     		dataType:"json",
     		success:function(res){
     			var img =  "";
     			for(var a = 0 ;a<res.length;a++){
     				// alert(res.length);
     				 img+='<div class="box"><img src="__STATIC__/'+res[a].attachment+'" url="'+res[a].attachment+'" width="100px" height="100px"></div>';
     			}
     			 $("#img").html(img);

     		}
     	})
    }
  });
  
  })

layui.use('upload', function(){
  var upload = layui.upload;
   
  //执行实例
  var uploadInst = upload.render({
    elem: '#test1' //绑定元素
    ,url: '__ADMIN__/bank/upload/' //上传接口
    ,done: function(res){
    	if(res.type==0){
		   	$.ajax({
     		type:"post",
     		url:"__ADMIN__/bank/img",
     		data:{page:1},
     		dataType:"json",
     		success:function(res){
     			var img =  "";
     			for(var a = 0 ;a<res.length;a++){
     				// alert(res.length);
     				 img+='<div class="box"><img src="__STATIC__/'+res[a].attachment+'" url="'+res[a].attachment+'" width="100px" height="100px"></div>';
     			}
     			 $("#img").html(img);

     		}
     		})
    	}
    }
    ,error: function(){
      //请求异常回调
    },accept: 'images' //允许上传的文件类型
  });
});
</script>
<script>
$(function(){
	$('.box').bind('mouseover',function(){
		var oPosition=$(this).position();
		var oThis=$(this)		
		$('.boxBor').queue('fnHide');		
		if($(".boxBor").attr('deta-switch')!=='true'){
			$(".boxBor").attr('deta-switch','true');
			$(".boxBor").css({
				width:'100%',
				height:$(window).height(),
				left:'0px',
				top:'0px',
				opacity:0,
				display:'block'
			})
		}
		$(".boxBor").stop(false,false).animate({
			opacity:1,
			left:oPosition.left+10,
			top:oPosition.top+10,
			width:oThis.width(),
			height:oThis.height()
		},250)
	})

})
	</script>